<template>
  <div>
    <!-- 首页分类 -->
    <div class="box">
      <van-tabs v-model="active">
        <van-tab 
          v-for="(item, index) in brotherCategory"
          :key="index"
          :title="item.name"
          :to="{path:'/channel',query:{id:item.id,num:index}}
          "
        >
          <h1>{{ item.name }}</h1>
          <h2>{{ item.front_desc }}</h2>
          <!-- 使用子组件 -->
           <chan-list></chan-list>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  //引入请求
import { GetChannel, } from "../request/api.js";
  // 引入子组件
import chanList from "../components/channel/channelist.vue"

export default {
  data() {
    return {
    //   active: 0,
      brotherCategory: [],
      goodlist: [],
      id:''
    };
  },
  methods: {
   
  },
  created() {
    //获取到tab栏的数据
    GetChannel({ id: this.$route.query.id })
      .then((res) => {
        this.brotherCategory = res.data.brotherCategory;
        
      })
      .catch((err) => {})
    //   获取到浏览的商品列表
  },
  //过滤器
  filters: {
    price(v) {
      return "¥" + v.toFixed(2) + "元";
    },
  },
  computed:{
    active:{
        set(){
        },
        get(){
        //  return this.$route.query.num
        }
     }
  },
  components:{
    chanList
  }
};
</script >

<style lang="less" scoped>
.box {
  text-align: center;
  h1 {
    line-height: 0.45rem;
    font-size: large;
    color: #333333;
  }
  h2 {
    line-height: 0.3rem;
    font-size: smaller;
    color: #666666;
  }
 
}
</style>